<template>
  <div class="selection-wrapper">
    <Selections @search="handleSearch" :roleOption="user" @getList="initList">
    </Selections>
    <div class="card-container">
      <CardList :list="list"></CardList>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.page"
        :page-sizes="[4, 12, 24]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import Selections from "@/components/selection";
import CardList from "./cardList";
import { mapGetters } from "vuex";
import { getAbnormalRecord } from "@/api";
export default {
  computed: {
    ...mapGetters({
      user: "user",
    }),
  },
  data() {
    return {
      searchForm: {
        level: "",
        area: "",
        routeId: "",
      },
      pagination: {
        page: 1,
        pageSize: 4,
        total: 0,
      },
      list: [],
    };
  },
  components: {
    Selections,
    CardList,
  },
  created() {
    // this.initList();
  },
  methods: {
    handleSearch(level, routId, area) {
      this.searchForm.level = level;
      this.searchForm.area = area;
      this.searchForm.routeId = routId;
      this.getList();
    },
    initList(p1, p2) {
      console.log('61',p1, p2);
      this.searchForm.level = p1;
      this.searchForm.routeId = p2;
      this.getList();
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pagination.page = val;
      this.getList();
    },
    getList() {
      const params = {
        routeId: this.searchForm.routeId,
        level: this.searchForm.level,
        page: this.pagination.page,
        limit: this.pagination.pageSize,
      };
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      getAbnormalRecord(params)
        .then((res) => {
          loading.close();
          if (res.statusCode == 200) {
            this.list = res.data.items;
            this.list.forEach(item => {
              if(item.attachUrl && item.attachUrl.indexOf('http') < 0) {
                item.attachUrl = $globalUrl + item.attachUrl
              }
            })
            this.pagination.total = res.data.totalItems;
          } else {
            this.$message(res.msg);
          }
        })
        .catch((err) => {
          loading.close();
          console.log(err);
        });
    },
  },
};
</script>
<style scoped>
.selection-wrapper {
  position: relative;
  margin: 25px 35px;
}
</style>
